<template>
  <div
    id="content"
    class="blog"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="loading"
    infinite-scroll-distance="10"
  >
    <div class="row" v-for="(item,index) in list" :key="index">
      <article class="placeholder">
        <div class="place-padding">
          <h2>
            <router-link :to='"/detail/"+item[0].id' rel="bookmark">{{item[0].title}}</router-link>
          </h2>
          <div class="post-meta">
            <span class="category">
              <a href="#" rel="category tag">
                <span style="color: #ff88af;">
                  <i class="fa fa-image" style="color: #ff88af;" 
                  aria-hidden="true"></i>
                  {{item[0].number}}
                </span>
              </a>
            </span>
            <em></em>
            <span class="time"></span>
            <em></em>
          </div>
          <figure>
            <router-link :to='"/detail/"+item[0].id' :title="item[0].title">
              <img class="featured-image aligncenter lazy" :src="item[0].url" :alt="item[0].title">
            </router-link>
          </figure>
        </div>
      </article>
      <article class="placeholder">
        <div class="place-padding">
          <h2>
            <router-link :to='"/detail/"+item[1].id' rel="bookmark">{{item[1].title}}</router-link>
          </h2>
          <div class="post-meta">
            <span class="category">
              <a href="#" rel="category tag">
                <span style="color: #ff88af;">
                  <i class="fa fa-image" style="color: #ff88af;" 
                  aria-hidden="true"></i>
                  {{item[1].number}}
                </span>
              </a>
            </span>
            <em></em>
            <span class="time"></span>
            <em></em>
          </div>
          <figure>
            <router-link :to='"/detail/"+item[1].id' :title="item[1].title">
              <img class="featured-image aligncenter lazy" :src="item[1].url" :alt="item[1].title">
            </router-link>
          </figure>
        </div>
      </article>
      <Ad></Ad>
    </div>

    <div class="text-center" v-if="loading">
      <div class="prev-next more" id="pagebtn">
        <span id="morebtn" class="button radius" onclick="showmore();">加载中...</span>
      </div>
    </div>
  </div>
</template>

<script>
import Ad from "../components/Ad";
export default {
  components: {
    Ad
  },
  beforeMount() {
    this.$http.get(this.getUrl()).then(res => {
      let array = res.data;
      for (let index = 0; index < res.data.length; index = index + 2) {
        this.list.push([array[index], array[index + 1]]);
      }
    });
  },
  data: () => ({
    loading: false,
    page: 1,
    length: 6,
    type: 2,
    list: []
  }),
  methods: {
    getUrl() {
      let start = (this.page - 1) * this.length;
      return `/api/img/cover?cid=2&type=${this.type}&st=${start}&lt=${
        this.length
      }`;
    },
    loadMore() {
      this.page += 1;
      this.$http.get(this.getUrl()).then(res => {
        let array = res.data;
        for (let index = 0; index < res.data.length; index = index + 2) {
          this.list.push([array[index], array[index + 1]]);
        }
      });
    }
  }
};
</script>
